﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ChiliShop.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebApplication1.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ChiliShopMasterHeadPlaceHolder" runat="server">    
    <script src="/Plugins/cycle/jquery.cycle.all.js"></script>


    <script type="text/javascript">
        var paused = false;
        $(document).ready(function () {
            $('.pics').cycle({
                //fx: 'zoom',
                //sync: false,
                //delay: -4000,

                fx: 'custom',
                cssBefore: {
                    left: 115,
                    top: 115,
                    width: 0,
                    height: 0,
                    opacity: 1,
                    display: 'block'
                },
                animOut: {
                    opacity: 0
                },
                animIn: {
                    left: 0,
                    top: 0,
                    width: 790,
                    height: 260
                },
                cssAfter: {
                    zIndex: 0
                },
                delay: -3000,
                before: function (curr, next, opts) {

                    //alert("Current slide " + opts.currSlide);
                }
            });

            $('.pics').click(function () {
                if (paused) {
                    $('.pics').cycle('resume');
                    paused = false;
                }
                else {
                    $('.pics').cycle('pause');
                    paused = true;
                }
            });
        });
    </script>


</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ChiliShopMasterContentPlaceHolder" runat="server">
    <div class="featured">
        <a href="blog.html">
            <img src="images/advertisement.jpg" alt="" /></a>
        <div class="pics">
            <img src="\images\shoes.jpg" width="790" height="260" />
            <img src="\images\jewelry.jpg" width="790" height="260" />
            <img src="\images\beauty-care.jpg" width="790" height="260" />
            <img src="\images\apparel.jpg" width="790" height="260" />
        </div>

        <div class="gallery">
            <%--<a href="new_arrival.html">
                <img src="images/aurora.jpg" alt="" /></a>
            --%>

            <ul class="first">
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=1">
                    <img src="images/summer-collection.jpg" alt="" /></a></li>
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=2">
                    <img src="images/beach-bride.jpg" alt="" /></a></li>
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=3">
                    <img src="images/motherhood-apparel.jpg" alt="" /></a></li>
            </ul>

            <ul>
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=4">
                    <img src="images/fashionable.jpg" alt="" /></a></li>
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=5">
                    <img src="images/accessories.jpg" alt="" /></a></li>
                <li><a href="/Pages/ProductThumbnailPage.aspx?categoryId=6">
                    <img src="images/skin-perfect.jpg" alt="" /></a></li>
            </ul>
        </div>
    </div>

</asp:Content>
